import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import QtQuick.Shapes 1.15

MainView {
    id: root
    width: 800
    height: 391
    property color btnColor: "#7080C0"
    property int btnHeight: 50
    property int btnWidth: 125
    property int recWidth: 210
    property int currentPage:0
    function isInteger(obj) {
       return (obj | 0) === obj
    }
    function isNumeric(value) {
      return /^[+-]?\d+(\.\d+)?$/;
    }
    function showInputPanel(itemName, itemValue, textInput) {
        enterValuePanel.itemName = itemName;
        enterValuePanel.itemValue = itemValue;
        enterValuePanel.textInput = textInput;
        enterValuePanel.visible = true;
        enterValuePanel.lastRec = gsMainRec;
        gsMainRec.visible = false;
    }

    function savePara(){
        if(!isNumeric(port.text))
        {
            saveOKDialog.title=qsTr("端口号必须是整数！")
            saveOKDialog.accepted.connect(function() {
                                    saveOKDialog.close()
                                })
            loaderText.visible=false;
            saveOKDialog.open()
            return;
        }
        if(!isInteger(Number(port.text)))
        {
            saveOKDialog.title=qsTr("端口号必须是整数！")
            saveOKDialog.accepted.connect(function() {
                                    saveOKDialog.close()
                                })
            loaderText.visible=false;
            saveOKDialog.open()
            return;
        }

        var res =mymodbus.slotSaveMqttParas(ipAddr.text,Number(port.text),userName.text,password.text,cmbMqttSwitch.currentIndex,truckNo.text,clientID.text)
        if(res)
        {
            saveOKDialog.title=qsTr("保存成功！")
            saveOKDialog.accepted.connect(function() {
                                    saveOKDialog.close()
                                })
        }
        else
        {
            saveOKDialog.title=qsTr("保存失败！")
            saveOKDialog.accepted.connect(function() {
                                    saveOKDialog.close()
                                })
        }
        loaderText.visible=false;
        saveOKDialog.open()
    }
    Component.onCompleted: {
        enterValuePanel.visible=false;
    }
    Component.onDestruction: {
       funcTimer.destroy()
    }
    Timer{
        id:gsTimmer
        interval: 500
        running: false
        repeat: false
        onTriggered: generalParaLoader.visible = false
    }
    MyBuzyIndicator{
        anchors.centerIn: parent
        id: generalParaLoader
        visible:false
        z:101
    }
    Dialog {
        anchors.centerIn: parent
        id: saveOKDialog
        //title: "提示"
        standardButtons: Dialog.Ok
        title:qsTr("保存成功！")
        modal: true
        closePolicy: "CloseOnEscape"
        //onAccepted: saveOKDialog.close()
        z:100
        //onRejected: console.log("Cancel clicked")
    }
    Rectangle{
        id: gsMainRec
        anchors.fill: parent
        color:"transparent"
        Rectangle
        {
            id:page0
            visible: true
            color:"transparent"
            width: 800
            height: 350
            GridLayout{
                id: mqttSettingsLayout
                rows: 3
                columns: 4
                anchors.top: parent.top
                anchors.topMargin: 30
                anchors.horizontalCenter: parent.horizontalCenter
                rowSpacing: 40
                Button
                {
                    Layout.row:0
                    Layout.column:0
                    Layout.preferredWidth: btnWidth
                    Layout.preferredHeight: btnHeight
                    text: qsTr("开关")
                    font.pixelSize: 18
                    background: Rectangle{
                        color: btnColor
                            }
                    onClicked: {
                        cmbMqttSwitch.popup.open()
                    }
                }
                MyComboBox
                {
                    id:cmbMqttSwitch
                    Layout.row:0
                    Layout.column:1
                    Layout.preferredWidth: recWidth
                    Layout.preferredHeight: btnHeight
                    // Layout.row:3
                    // Layout.column:1
                    // Layout.preferredWidth: recWidth
                    // Layout.preferredHeight: btnHeight
                    borderColor:"white"
                    fillColor:"#0A3653"
                    model:["OFF","ON"]
                    currentIndex: mymodbus.mqttSwitch
                }
                Button
                {
                    Layout.row:0
                    Layout.column:2
                    Layout.preferredWidth: btnWidth
                    Layout.preferredHeight: btnHeight
                    // x: 152
                    // y: 13
                    text: "IP"
                    font.pixelSize: 18
                    background: Rectangle{
                        color: btnColor
                            }
                    onClicked: {
                        showInputPanel(qsTr("IP"), ipAddr.text, ipAddr);
                    }
                }
                Rectangle {
                    id: recIPAddr
                    color: "transparent"
                    border.width: 0
                    border.color: "white"
                    Layout.row:0
                    Layout.column:3
                    Layout.preferredWidth: recWidth
                    Layout.preferredHeight: btnHeight
                    // 绘制一条边框
                    Shape {
                        anchors.fill: parent
                        ShapePath {
                            strokeWidth: 3
                            strokeColor: "white"
                            strokeStyle: ShapePath.SolidLine
                            startX: 0
                            startY: recIPAddr.height
                            PathLine {
                                x: recIPAddr.width
                                y: recIPAddr.height
                            }
                        }
                    }
                    TextInput{
                        id:ipAddr
                        // 关键修改：限制宽度为父容器宽度，超出部分裁剪
                        width: parent.width
                        height: parent.height
                        // 启用裁剪，超出控件范围的内容将被隐藏
                        clip: true
                        // 移除anchors.fill: parent，改为明确设置宽高
                        // anchors.fill: parent
                        
                        //echoMode: TextInput.Password
                        text:mymodbus.hostName
                        color:"white"
                        font.pixelSize: 25
                        //horizontalAlignment: Text.AlignHCenter
                        horizontalAlignment: Text.AlignLeft  // 改为左对齐
                        verticalAlignment: Text.AlignBottom
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                showInputPanel(qsTr("IP"), ipAddr.text, ipAddr);
                            }
                        }
                    }
                }

                Button
                {
                    Layout.row:1
                    Layout.column:0
                    Layout.preferredWidth: btnWidth
                    Layout.preferredHeight: btnHeight
                    // x: 152
                    // y: 13
                    text: qsTr("端口号")
                    font.pixelSize: 18
                    background: Rectangle{
                        color: btnColor
                            }
                    onClicked: {
                        showInputPanel(qsTr("端口号"), port.text, port);
                    }
                }

                Rectangle {
                    id: recPort
                    color: "transparent"
                    border.width: 0
                    border.color: "white"
                    Layout.row:1
                    Layout.column:1
                    Layout.preferredWidth: recWidth
                    Layout.preferredHeight: btnHeight
                    // 绘制一条边框
                    Shape {
                        anchors.fill: parent
                        ShapePath {
                            strokeWidth: 3
                            strokeColor: "white"
                            strokeStyle: ShapePath.SolidLine
                            startX: 0
                            startY: recPort.height
                            PathLine {
                                x: recPort.width
                                y: recPort.height
                            }
                        }
                    }
                    TextInput{
                        id:port
                        anchors.fill: parent
                        //echoMode: TextInput.Password
                        text:mymodbus.port
                        color:"white"
                        font.pixelSize: 25
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignBottom
                        MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    showInputPanel(qsTr("端口号"), port.text, port);
                                }
                            }

                    }
                }
                Button
                {
                    Layout.row:1
                    Layout.column:2
                    Layout.preferredWidth: btnWidth
                    Layout.preferredHeight: btnHeight
                    // x: 152
                    // y: 13
                    text: qsTr("ClientID")
                    font.pixelSize: 18
                    background: Rectangle{
                        color: btnColor
                            }
                    onClicked: {
                        showInputPanel(qsTr("ClientID"), clientID.text, clientID);
                    }
                }

                Rectangle {
                    id: recClientID
                    color: "transparent"
                    border.width: 0
                    border.color: "white"
                    Layout.row:1
                    Layout.column:3
                    Layout.preferredWidth: recWidth
                    Layout.preferredHeight: btnHeight
                    // 绘制一条边框
                    Shape {
                        anchors.fill: parent
                        ShapePath {
                            strokeWidth: 3
                            strokeColor: "white"
                            strokeStyle: ShapePath.SolidLine
                            startX: 0
                            startY: recClientID.height
                            PathLine {
                                x: recClientID.width
                                y: recClientID.height
                            }
                        }
                    }
                    Flickable{
                        width: recWidth
                        height: btnHeight
                        contentWidth: clientID.width
                        contentHeight: clientID.height
                        clip: true
                        TextInput{
                            id:clientID
                            width:clientID.text.length*30
                            height:btnHeight
                            //width:recWidth
                            //echoMode: TextInput.Password
                            text:mymodbus.clientID
                            color:"white"
                            font.pixelSize: 25
                            horizontalAlignment: Text.AlignLeft
                            verticalAlignment: Text.AlignBottom
                            //clip: true
                            //focus: true


                        }
                        MouseArea {
                            width: recWidth
                            height: btnHeight
                                onClicked: {
                                    showInputPanel(qsTr("ClientID"), clientID.text, clientID);
                                }
                            }
                    }
                }
                /*
                Button
                {
                    Layout.row:1
                    Layout.column:2
                    Layout.preferredWidth: btnWidth
                    Layout.preferredHeight: btnHeight
                    // x: 152
                    // y: 13
                    text: qsTr("主题")
                    font.pixelSize: 18
                    background: Rectangle{
                        color: btnColor
                            }
                    onClicked: {
                        showInputPanel(qsTr("主题"), topic.text, topic);
                    }
                }

                Rectangle {
                    id: recTopic
                    color: "transparent"
                    border.width: 0
                    border.color: "white"
                    Layout.row:1
                    Layout.column:3
                    Layout.preferredWidth: recWidth
                    Layout.preferredHeight: btnHeight
                    // 绘制一条边框
                    Shape {
                        anchors.fill: parent
                        ShapePath {
                            strokeWidth: 3
                            strokeColor: "white"
                            strokeStyle: ShapePath.SolidLine
                            startX: 0
                            startY: recTopic.height
                            PathLine {
                                x: recTopic.width
                                y: recTopic.height
                            }
                        }
                    }
                    Flickable{
                        width: recWidth
                        height: btnHeight
                        contentWidth: topic.width
                        contentHeight: topic.height
                        clip: true
                        TextInput{
                            id:topic
                            width:topic.text.length*30
                            height:btnHeight
                            //width:recWidth
                            //echoMode: TextInput.Password
                            text:mymodbus.topic
                            color:"white"
                            font.pixelSize: 25
                            horizontalAlignment: Text.AlignLeft
                            verticalAlignment: Text.AlignBottom
                            //clip: true
                            //focus: true

                        }
                        MouseArea {
                            width: recWidth
                            height: btnHeight
                                onClicked: {
                                    showInputPanel(qsTr("主题"), topic.text, topic);
                                }
                            }

                    }
                }
                */
                Button
                {
                    Layout.row:2
                    Layout.column:0
                    Layout.preferredWidth: btnWidth
                    Layout.preferredHeight: btnHeight
                    // x: 152
                    // y: 13
                    text: qsTr("用户名")
                    font.pixelSize: 18
                    background: Rectangle{
                        color: btnColor
                            }
                    onClicked: {
                        showInputPanel(qsTr("用户名"), userName.text, userName);
                    }
                }
                Rectangle {
                    id: recUserName
                    color: "transparent"
                    border.width: 0
                    border.color: "white"
                    Layout.row:2
                    Layout.column:1
                    Layout.preferredWidth: recWidth
                    Layout.preferredHeight: btnHeight
                    // 绘制一条边框
                    Shape {
                        anchors.fill: parent
                        ShapePath {
                            strokeWidth: 3
                            strokeColor: "white"
                            strokeStyle: ShapePath.SolidLine
                            startX: 0
                            startY: recUserName.height
                            PathLine {
                                x: recUserName.width
                                y: recUserName.height
                            }
                        }
                    }
                    TextInput{
                        id:userName
                        anchors.fill: parent
                        //echoMode: TextInput.Password
                        text:mymodbus.userName
                        color:"white"
                        font.pixelSize: 25
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignBottom
                        MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    showInputPanel(qsTr("用户名"), userName.text, userName);
                                }
                            }

                    }
                }
                Button
                {
                    Layout.row:2
                    Layout.column:2
                    Layout.preferredWidth: btnWidth
                    Layout.preferredHeight: btnHeight
                    // x: 152
                    // y: 13
                    text: qsTr("密码")
                    font.pixelSize: 18
                    background: Rectangle{
                        color: btnColor
                            }
                    onClicked: {
                        showInputPanel(qsTr("密码"), password.text, password);
                    }
                }
                Rectangle {
                    id: recPwd
                    color: "transparent"
                    border.width: 0
                    border.color: "white"
                    Layout.row:2
                    Layout.column:3
                    Layout.preferredWidth: recWidth
                    Layout.preferredHeight: btnHeight
                    // 绘制一条边框
                    Shape {
                        anchors.fill: parent
                        ShapePath {
                            strokeWidth: 3
                            strokeColor: "white"
                            strokeStyle: ShapePath.SolidLine
                            startX: 0
                            startY: recPwd.height
                            PathLine {
                                x: recPwd.width
                                y: recPwd.height
                            }
                        }
                    }
                    TextInput{
                        id:password
                        anchors.fill: parent
                        echoMode: TextInput.Password
                        text:mymodbus.password
                        color:"white"
                        font.pixelSize: 25
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignBottom
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                showInputPanel(qsTr("密码"), password.text, password);
                            }
                        }
                    }
                }                
            }
        }

        Rectangle
        {
            id:page1
            visible: false
            color:"transparent"
            width: 800
            height: 350
            GridLayout{
                id: mqttSettingsLayout1
                rows: 2
                columns: 4
                anchors.top: parent.top
                anchors.topMargin: 30
                anchors.horizontalCenter: parent.horizontalCenter
                rowSpacing: 40
                Button
                {
                    Layout.row:0
                    Layout.column:0
                    Layout.preferredWidth: btnWidth
                    Layout.preferredHeight: btnHeight
                    // x: 152
                    // y: 13
                    text: qsTr("车牌号")
                    font.pixelSize: 18
                    background: Rectangle{
                        color: btnColor
                            }
                    onClicked: {
                        showInputPanel(qsTr("车牌号"), truckNo.text, truckNo);
                    }
                }
                Rectangle {
                    id: recTruckNo
                    color: "transparent"
                    border.width: 0
                    border.color: "white"
                    Layout.row:0
                    Layout.column:1
                    Layout.preferredWidth: recWidth
                    Layout.preferredHeight: btnHeight
                    // 绘制一条边框
                    Shape {
                        anchors.fill: parent
                        ShapePath {
                            strokeWidth: 3
                            strokeColor: "white"
                            strokeStyle: ShapePath.SolidLine
                            startX: 0
                            startY: recTruckNo.height
                            PathLine {
                                x: recTruckNo.width
                                y: recTruckNo.height
                            }
                        }
                    }
                    TextInput{
                        id:truckNo
                        anchors.fill: parent
                        //echoMode: TextInput.Password
                        text:mymodbus.truckNo
                        color:"white"
                        font.pixelSize: 25
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignBottom
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                showInputPanel(qsTr("车牌号"), truckNo.text, truckNo);
                            }
                        }
                    }
                }
                

                /*
                Button
                {
                    Layout.row:1
                    Layout.column:2
                    Layout.preferredWidth: btnWidth
                    Layout.preferredHeight: btnHeight
                    // x: 152
                    // y: 13
                    text: qsTr("订阅主题")
                    font.pixelSize: 18
                    background: Rectangle{
                        color: btnColor
                            }
                    onClicked: {
                        showInputPanel(qsTr("订阅主题"), subTopic.text, subTopic);
                    }
                }

                Rectangle {
                    id: recSubTopic
                    color: "transparent"
                    border.width: 0
                    border.color: "white"
                    Layout.row:1
                    Layout.column:3
                    Layout.preferredWidth: recWidth
                    Layout.preferredHeight: btnHeight
                    // 绘制一条边框
                    Shape {
                        anchors.fill: parent
                        ShapePath {
                            strokeWidth: 3
                            strokeColor: "white"
                            strokeStyle: ShapePath.SolidLine
                            startX: 0
                            startY: recSubTopic.height
                            PathLine {
                                x: recSubTopic.width
                                y: recSubTopic.height
                            }
                        }
                    }
                    Flickable{
                        width: recWidth
                        height: btnHeight
                        contentWidth: subTopic.width
                        contentHeight: subTopic.height
                        clip: true
                        TextInput{
                            id:subTopic
                            width:subTopic.text.length*30
                            height:btnHeight
                            //width:recWidth
                            //echoMode: TextInput.Password
                            text:mymodbus.subTopic
                            color:"white"
                            font.pixelSize: 25
                            horizontalAlignment: Text.AlignLeft
                            verticalAlignment: Text.AlignBottom
                            //clip: true
                            //focus: true

                        }
                        MouseArea {
                            width: recWidth
                            height: btnHeight
                            onClicked: {
                                showInputPanel(qsTr("订阅主题"), subTopic.text, subTopic);
                            }
                        }
                    }
                }*/
            }
        }
        Row {
            x:57
            y:300
            Button {
                id: btnPrePage
                height: 40
                width: 123
                text: qsTr("上一页")
                font.pixelSize: 25
                palette.buttonText: "white"
                onClicked: {
                    page0.visible=true
                    page1.visible=false
                    pageNo.text="1/2"
                }
                background: Rectangle {
                    color: "#7584c2"
                    border.width: 0
                }
            }

            Text{
                id:pageNo
                font.pixelSize: 38
                height:40
                color:"White"
                text:"1/2"
            }

            Button {
                id: btnNextPage
                height: 40
                width: 123
                text: qsTr("下一页")
                font.pixelSize: 25
                palette.buttonText: "white"
                onClicked: {
                    page1.visible=true
                    page0.visible=false
                    pageNo.text="2/2"
                }
                background: Rectangle {
                    color: "#7584c2"
                    border.width: 0
                }
            }
        }


        Button
        {
            id:btnMqttSettingsOK
            x: 572
            y: 281
            //x: 675
            //y: 20
            width: 100
            height: 100
            background: Rectangle{
                border.width: 0
                color: "#C070B0"
            }

            text: qsTr("确定")
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                if(loaderText.visible)
                {
                    return;
                }
                loaderText.visible=true;
                funcTimer.start();
            }
        }
        Button
        {
            id:btnReturn
            x: 688
            y: 281
            //x: 675
            //y: 20
            width: 100
            height: 100
            background: Rectangle{
                border.width: 0
                color: "#B0B0D0"
            }

            text: qsTr("返回")
            font.pixelSize: 25
            palette.buttonText: "white"
            onClicked: {
                //rectangle.selectedView = 4
                bottomBar.selected=4
                //myLoader.visible=false;
                //myLoader.visible=true
                myLoader.source="SettingsPanel.qml"
                //destroy()
            }
        }
    }

    EnterValuePanel{
        id:enterValuePanel
        width: 800
        height: 391
        visible:false
    }
    Timer {
        id:funcTimer
        running: false
        repeat: false
        interval:100
        onTriggered: {
            savePara()
        }
    }
}
